<template>
  <div class="xd-label-search">
    <div class="list" v-show="isShow">
      <Card>
        <p slot="title">
          <Icon type="md-list" />
          标签列表
        </p>
        <Form ref="formInline" :model="formSearch"  inline>
            <div>
              <FormItem prop="depaid" v-show="access !== 'wash'">
                <Select class="select" v-model="formSearch.depaid" placeholder="请选择洗涤公司">
                  <Option v-for="item in washList" :value="item.depaid" :key="item.depaid">
                  {{ item.depaname }}
                  </Option>
                </Select>
              </FormItem>
              <FormItem prop="lx">
                <Select class="select" v-model="formSearch.lx" placeholder="请选择标签类别">
                  <Option value=0>全部</Option>
                  <Option v-for="item in categoryList" :value="item.categoryid" :key="item.categoryid">
                  {{ item.categoryname }}
                  </Option>
                </Select>
              </FormItem>
              <FormItem prop="custom">
                  <Input type="text" v-model="formSearch.custom" placeholder="请输入医院名称关键字"></Input>
              </FormItem>
              <FormItem prop="name">
                  <Input type="text" v-model="formSearch.name" placeholder="请输入标签编号"></Input>
              </FormItem>
              <FormItem prop="washcnt">
                  <Input type="text" v-model="formSearch.washcnt" placeholder="请输入洗涤次数"></Input>
              </FormItem>
            </div>
            <div>
              <FormItem prop="regStartTime">
                <DatePicker type="date" placeholder="注册起始时间" :options="regStartTimeOption" v-model="formSearch.regStartTime"  @on-change="onRegStartTimeChange"></DatePicker>
              </FormItem>
              <FormItem prop="regEndTime">
                <DatePicker type="date" placeholder="注册结束时间" :options="regEndTimeOption" v-model="formSearch.regEndTime"  @on-change="onRegEndTimeChange"></DatePicker>
              </FormItem>
              <FormItem prop="optStartTime">
                <DatePicker type="date" placeholder="操作起始时间" :options="optStartTimeOption" v-model="formSearch.optStartTime"  @on-change="onOptStartTimeChange"></DatePicker>
              </FormItem>
              <FormItem prop="optEndTime">
                <DatePicker type="date" placeholder="操作结束时间" :options="optEndTimeOption" v-model="formSearch.optEndTime"  @on-change="onOptEndTimeChange"></DatePicker>
              </FormItem>
              <FormItem>
                <Button type="primary" @click="handleSeacrh()">查询</Button>
              </FormItem>
            </div>
        </Form>
        <Table highlight-row stripe :columns="columns" :data="data" ></Table>
        <div style="margin: 10px;overflow: hidden">
          <div style="float: right;">
            <Page :total="page.total" :page-size="page.pageSize" :current="1" @on-change="changePage" show-total></Page>
          </div>
        </div>
      </Card>
    </div>
    <div class="view" v-show="!isShow">
      <Card>
        <p slot="title">
          <Icon type="ios-paper" />
          查看详情
        </p>
        <p slot="extra" >
          <Button type="primary" @click="goBack()">返回</Button>
        </p>
        <div class="view-content">
          <p class="viewLine"><span>序号:</span>{{currentData.id}}</p>
          <p class="viewLine"><span>标签ID:</span>{{currentData.labelId}}</p>
          <p class="viewLine"><span>医院:</span>{{currentData.companyName}}</p>
          <p class="viewLine"><span>科室:</span>{{currentData.departmentName}}</p>
          <p class="viewLine"><span>类别:</span>{{currentData.categoryName}}</p>
          <p class="viewLine"><span>洗涤次数:</span>{{currentData.washNumber}}</p>
          <p class="viewLine"><span>状态:</span>{{currentData.status}}</p>
          <p class="viewLine"><span>注册时间:</span>{{currentData.createTime}}</p>
          <p class="viewLine"><span>更新时间:</span>{{currentData.updateTime}}</p>
        </div>

        <Card>
          <p slot="title">
            洗涤出库记录
          </p>
          <div>
            <Table highlight-row stripe :columns="columnsRecord" :data="currentData.outList" :show-header="showHeader" height="200" size="small"></Table>
          </div>
        </Card>

        <Card class="layoutCard">
          <p slot="title">
            洗涤入库记录
          </p>
          <div>
            <Table highlight-row stripe :columns="columnsRecord" :data="currentData.entryList" :show-header="showHeader" height="200" size="small"></Table>
          </div>
        </Card>

      </Card>
    </div>
  </div>
</template>

<script>
import API from "./api";
import ValidatorRule from "@/filters/validator-rule";
import { formatNetTime } from "@/libs/tools";
import i18n from "./locale";
import mixinDate from "@/mixin/date-mixin";
import mixinTag from "@/mixin/tag-mixin";

export default {
  name: "xd-label-search",
  mixins: [mixinDate, mixinTag],
  components: {},
  data() {
    return {
      i18n: i18n,
      isShow: true,
      currentData: "",
      washList: [],
      hospitalList: [],
      categoryList: [],
      statusList: [],
      showHeader: false,
      regStartTimeOption: {},
      regEndTimeOption: {},
      optStartTimeOption: {},
      optEndTimeOption: {},
      page: {
        total: 0,
        pageSize: 20
      },
      formSearch: {
        depaid: "",
        custom: "",
        name: "",
        lx: "",
        washcnt: "",
        regStartTime: "",
        regEndTime: "",
        optStartTime: "",
        optEndTime: "",
        pageNum: 1,
        pageSize: 20
      },
      columnsRecord: [
        {
          title: "时间记录",
          key: "time"
        }
      ],
      columns: [
        {
          title: "序号",
          key: "id"
        },
        {
          title: "标签ID",
          key: "labelid",
          width: 220,
          ellipsis: true,
          tooltip: true
        },
        {
          title: "医院",
          key: "hospitalname",
          ellipsis: true,
          tooltip: true
        },
        {
          title: "科室",
          key: "comment"
        },
        {
          title: "类别",
          key: "categoryname"
        },
        {
          title: "洗涤次数",
          key: "washcount"
        },
        {
          title: "状态",
          key: "state",
          ellipsis: true,
          render: (h, params) => {
            return h(
              "Tooltip",
              {
                class: {
                  "ivu-table-cell-tooltip": true
                }
              },
              [
                h(
                  "span",
                  {
                    class: {
                      "ivu-table-cell-tooltip-content": true
                    }
                  },
                  this.formatStatus(params.row.state, true)
                ),
                h(
                  "div",
                  {
                    slot: "content"
                  },
                  this.formatStatus(params.row.state, true)
                )
              ]
            );
          }
        },
        {
          title: "注册时间",
          key: "regdt",
          ellipsis: true,
          tooltip: true,
          render: (h, params) => {
            return h(
              "Tooltip",
              {
                class: {
                  "ivu-table-cell-tooltip": true
                }
              },
              [
                h(
                  "span",
                  {
                    class: {
                      "ivu-table-cell-tooltip-content": true
                    }
                  },
                  this.formatTime(params.row.regdt, true)
                ),
                h(
                  "div",
                  {
                    slot: "content"
                  },
                  this.formatTime(params.row.regdt, true)
                )
              ]
            );
          }
        },
        {
          title: "操作时间",
          key: "operatedt",
          ellipsis: true,
          tooltip: true,
          render: (h, params) => {
            return h(
              "Tooltip",
              {
                class: {
                  "ivu-table-cell-tooltip": true
                }
              },
              [
                h(
                  "span",
                  {
                    class: {
                      "ivu-table-cell-tooltip-content": true
                    }
                  },
                  this.formatTime(params.row.regdt, true)
                ),
                h(
                  "div",
                  {
                    slot: "content"
                  },
                  this.formatTime(params.row.regdt, true)
                )
              ]
            );
          }
        }
      ],
      data: []
    };
  },

  mounted() {
    this.getHospitalList();
    this.getCategoryList();
    this.getStatusList();
    this.resetInit();
  },

  activated() {
    this.getHospitalList();
    this.getCategoryList();
    this.getStatusList();
    let userInfo = this.$store.state.user.userInfo.data;
    this.access = this.$store.state.user.access;
    if (this.access !== "wash") {
      this.getWashlList();
    }
  },

  methods: {
    resetInit() {
      let userInfo = this.$store.state.user.userInfo.data;
      this.access = this.$store.state.user.access;
      if (this.access == "wash") {
        this.formSearch.depaid = userInfo.depaid;
        this.handleSeacrh();
      } else {
        this.getWashlList();
      }
    },

    onRegStartTimeChange(startTime) {
      this.regEndTimeOption = {
        disabledDate(endTime) {
          return endTime < new Date(startTime);
        }
      };
    },

    onRegEndTimeChange(endTime) {
      this.regStartTimeOption = {
        disabledDate(startTime) {
          return startTime > new Date(endTime);
        }
      };
    },

    onOptStartTimeChange(startTime) {
      this.optEndTimeOption = {
        disabledDate(endTime) {
          return endTime < new Date(startTime);
        }
      };
    },

    onOptEndTimeChange(endTime) {
      this.optStartTimeOption = {
        disabledDate(startTime) {
          return startTime > new Date(endTime);
        }
      };
    },

    formatTime: function(timeStr1, bool) {
      return formatNetTime(timeStr1, bool);
    },

    formatStatus: function(value) {
      let text = "",
        statusList = this.statusList;
      for (let i in statusList) {
        if (value == statusList[i].status1) {
          text = statusList[i].comment;
        }
      }
      return text;
    },

    getHospitalList() {
      API.getHospitalList({ type: 2 })
        .then(res => {
          if (res.code == 200) {
            this.hospitalList = res.data;
          }
        })
        .catch(err => {
          this.$Message.error("请求异常！");
        });
    },

    getWashlList() {
      API.getWashlList({ type: 1 })
        .then(res => {
          if (res.code == 200) {
            this.washList = res.data;
          }
        })
        .catch(err => {
          this.$Message.error("请求异常！");
        });
    },

    getStatusList() {
      API.getStatusList()
        .then(res => {
          if (res.code == 200) {
            this.statusList = res.data.list;
          }
        })
        .catch(err => {
          this.$Message.error("请求异常！");
        });
    },

    getCategoryList() {
      API.getCategoryList()
        .then(res => {
          if (res.code == 200) {
            this.categoryList = res.data.list;
          }
        })
        .catch(err => {
          this.$Message.error("请求异常！");
        });
    },

    checkParams(obj) {
      let bool = true;

      if (obj.depaid == "") {
        this.$Message.error("查询洗涤公司必选！");
        bool = false;
      }

      if (obj.lx == "") {
        this.$Message.error("标签类型必选！");
        bool = false;
      }

      if (obj.regStartTime) {
        if (obj.regEndTime == "") {
          this.$Message.error("注册结束时间需要完善！");
          bool = false;
        }
      }

      if (obj.regEndTime) {
        if (obj.regStartTime == "") {
          this.$Message.error("注册开始时间需要完善！");
          bool = false;
        }
      }

      if (obj.optStartTime) {
        if (obj.optEndTime == "") {
          this.$Message.error("操作结束时间需要完善！");
          bool = false;
        }
      }

      if (obj.optEndTime) {
        if (obj.optStartTime == "") {
          this.$Message.error("操作开始时间需要完善！");
          bool = false;
        }
      }
      return bool;
    },

    handleSeacrh() {
      let obj = _.clone(this.formSearch);
      if (!this.checkParams(obj)) {
        return;
      }
      obj.pageNum = 1;
      this.formSearch = _.clone(obj);
      if (obj.regStartTime != "" || obj.regEndTime != "") {
        obj.regStartTime = this.UTC(obj.regStartTime, "starttime");
        obj.regEndTime = this.UTC(obj.regEndTime, "endtime");
      }
      if (obj.optStartTime != "" || obj.optEndTime != "") {
        obj.optStartTime = this.UTC(obj.optStartTime, "starttime");
        obj.optEndTime = this.UTC(obj.optEndTime, "endtime");
      }
      this.getList(obj);
    },

    changePage(pageNum) {
      let obj = _.clone(this.formSearch),
        maxPageNum = Math.ceil(this.page.total / this.page.pageSize);
      if (obj.pageNum > maxPageNum) {
        obj.pageNum = maxPageNum;
      } else {
        obj.pageNum = pageNum;
      }
      this.formSearch = _.clone(obj);
      if (obj.regStartTime != "" || obj.regEndTime != "") {
        obj.regStartTime = this.UTC(obj.regStartTime, "starttime");
        obj.regEndTime = this.UTC(obj.regEndTime, "endtime");
      }
      if (obj.optStartTime != "" || obj.optEndTime != "") {
        obj.optStartTime = this.UTC(obj.optStartTime, "starttime");
        obj.optEndTime = this.UTC(obj.optEndTime, "endtime");
      }
      this.getList(obj);
    },

    getList(obj) {
      API.getList(obj)
        .then(res => {
          if (res.code == 200) {
            let data = res.data;
            this.page.total = data.total;
            this.page.pageSize = data.pageSize;
            this.data = data.list;
          }
        })
        .catch(err => {
          this.$Message.error("请求异常！");
        });
    }
  }
};
</script>
<style lang="less" >
@import "./xd-label-search.less";
</style>
